//
// Resizable Table Columns.
//  version: 1.0
//
// (c) 2006, bz
//
// 25.12.2006:  first working prototype
// 26.12.2006:  now works in IE as well but not in Opera (Opera is @#$%!)
// 27.12.2006:  changed initialization, now just make class='resizable' in table and load script
//
function preventEvent(e) {
    var ev = e || window.event;
    if (ev.preventDefault) ev.preventDefault();
    else ev.returnValue = false;
    if (ev.stopPropagation)
        ev.stopPropagation();
    return false;
}

function getWidth(x) {
    if (x.currentStyle)
        // in IE
        var y = x.clientWidth - parseInt(x.parentNode.parentNode.currentStyle["paddingLeft"]) - parseInt(x.parentNode.parentNode.currentStyle["paddingRight"]);
        // for IE5: var y = x.offsetWidth;
    else if (window.getComputedStyle)
        // in Gecko
        var y = document.defaultView.getComputedStyle(x.parentNode.parentNode,null).getPropertyValue("width");
    return y || 0;
}

// main class prototype
function ColumnResize(div, columnName, config, saveName) {
    // ============================================================
    // private data
    var self = this;
    //var dragColumns  = table.rows[0].cells; // first row columns, used for changing of width
    // var dragColumns = $('#table th');

    //if (!dragColumns) return; // return if no table exists or no one row exists

    //var dragColumnNo; // current dragging column
    var dragX;        // last event X mouse coordinate
    var saveOnmouseup;   // save document onmouseup event handler
    var saveOnmousemove; // save document onmousemove event handler
    var saveBodyCursor;  // save body cursor property
    var _tableWidth = parseInt($("#table").css('width'));
    // ============================================================
    // methods

    // ============================================================
    // do changes columns widths
    // returns true if success and false otherwise
    this.changeColumnWidth = function(w) {
        var target = div.parentNode.parentNode;
        if(parseInt(getWidth(div)) + w < 100) {
            target.style.width = 100 + 'px';
            return true;
        }
        let filed = this.getField(columnName);
        $("#table").css({
            'min-width': _tableWidth + w + 'px',
            'max-width': _tableWidth + w + 'px',
        })
        _tableWidth  += w;
        filed.width = parseInt(getWidth(div)) + w +'px';
        updateTable(saveName, config);
        target.style.width = parseInt(getWidth(div)) + w +'px';
        return true;
    }

    this.getField = function(name) {
        var filed = {};
        config.columns.forEach(function(item, index) {
            if(item.field == name) {
                filed = item;
            }
        })
        return filed
    }
    // ============================================================
    // do drag column width
    this.columnDrag = function(e) {
        var e = e || window.event;
        var X = e.clientX || e.pageX;
        if (!self.changeColumnWidth(X-dragX)) {
            // stop drag!
            self.stopColumnDrag(e);
        }

        dragX = X;
        // prevent other event handling
        preventEvent(e);
        return false;
    }

    // ============================================================
    // stops column dragging
    this.stopColumnDrag = function(e) {
        var e = e || window.event;
        // restore handlers & cursor
        document.onmouseup  = saveOnmouseup;
        document.onmousemove = saveOnmousemove;
        document.body.style.cursor = saveBodyCursor;

        // remember columns widths in cookies for server side
        // var colWidth = '';
        // var separator = '';
        // for (var i=0; i<dragColumns.length; i++) {
        //     colWidth += separator + parseInt( getWidth(dragColumns[i]) );
        //     separator = '+';
        // }
        // var expire = new Date();
        // expire.setDate(expire.getDate() + 365); // year
        // document.cookie = self.id + '-width=' + colWidth +
        //     '; expires=' + expire.toGMTString();

        preventEvent(e);
    }

    // ============================================================
    // init data and start dragging
    this.startColumnDrag = function(e) {
        var e = e || window.event;
        e.stopPropagation();

        // if not first button was clicked
        //if (e.button != 0) return;

        // remember dragging object
        // dragColumnNo = (e.target || e.srcElement).parentNode.parentNode.cellIndex;
        dragX = e.clientX || e.pageX;

        // set up current columns widths in their particular attributes
        // do it in two steps to avoid jumps on page!
        // var colWidth = new Array();
        // for (var i=0; i<dragColumns.length; i++)
        //     colWidth[i] = parseInt( getWidth(dragColumns[i]) );
        // for (var i=0; i<dragColumns.length; i++) {
        //     dragColumns[i].width = ""; // for sure
        //     dragColumns[i].style.width = colWidth[i] + "px";
        // }
        //   getWidth(div)
        // console.log(dragX);return;
        div.style.width = getWidth(div) + 'px';
        saveOnmouseup       = document.onmouseup;
        document.onmouseup  = self.stopColumnDrag;

        saveBodyCursor             = document.body.style.cursor;
        document.body.style.cursor = 'w-resize';

        // fire!
        saveOnmousemove      = document.onmousemove;
        document.onmousemove = self.columnDrag;

        preventEvent(e);
    }

    // prepare table header to be draggable
    // it runs during class creation
    // for (var i=0; i<dragColumns.length; i++) {
    //     dragColumns[i].innerHTML = "<div style='position:relative;height:100%;width:100%'>"+
    //         "<div style='"+
    //         "position:absolute;height:100%;width:5px;margin-right:-5px;"+
    //         "left:100%;top:0px;cursor:w-resize;z-index:10;'>"+
    //         "</div>"+
    //         dragColumns[i].innerHTML+
    //         "</div>";
            // BUGBUG: calculate real border width instead of 5px!!!
            // dragColumns[i].firstChild.firstChild.onmousedown = this.startColumnDrag;
        // }
        // 
    // $(div).on('mousedown', this.startColumnDrag)
    div.onmousedown = this.startColumnDrag;
}

// select all tables and make resizable those that have 'resizable' class
function ResizableColumns(config, saveName) {
    $('#table').on('mouseover', '.drag-line', function (e) {
        new ColumnResize(e.target, e.target.getAttribute('data-name'), config, saveName)
    })
}

function updateTable(saveName, config) {
    config.data = [];
    for(var c in config) {
        if(typeof config[c] == 'function') {
            delete config[c]
        }
    }
    remember(saveName, config)
}